<template>
  <div id="CllectList">
    <!-- 关注的商品 -->
    <div
      v-if=" selectTypeId===1"
      class="cllect_box"
    >
      <el-row :gutter="20">
        <el-col
          v-for="(item,index) in CollectList"
          :key="index"
          :span="8"
        >
          <!-- :class="showOver == true? 'overDiv':''" -->
          <div 
            v-if="showOver == true" 
            class="checkbox_box"
            style="height:26rem"
            @click="CheckClick(item)"
          >
            <el-checkbox v-model="item.CheckboxStatus" />
          </div>
          <div 
            class="elcol_box"
            :class="showOver == true? 'overDiv':''"
          >
            <div
              class="img_box"
              @click="GoToSho(item)"
            >
              <img
                :src="item.defaultAlbum"
                alt=""
              >
            </div>
            <div class="elcol_body">
              <div class="title">
                {{ item.pName }}
              </div>
              <div class="elcol_body_l">
                <div class="price_box">
                  <span class="money">￥</span>
                  <span class="price">{{ item.fSalePrice }}</span>
                </div>
                <div class="price_box">
                  <!-- <div
                    class="addcard"
                    @click="AddCar(item)"
                  >
                    <i class="el-icon-shopping-cart-2" />
                  </div> -->
                  <div
                    class="find"
                    @click="CancelCollection(item)"
                  >
                    取消收藏
                  </div>
                </div>
              </div>
              <div class="compare_box">
                比原价便宜了￥{{ item.fMarkPrice }}元
              </div>
              <!-- <div class="find">
                取消收藏
              </div> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 关注的商品END -->
    <!-- 关注的店铺 -->
    <div
      v-if=" selectTypeId===2"
      class="cllect_box"
    >
      <el-row :gutter="20">
        <el-col
          v-for="(item,index) in ShopCollectList"
          :key="index"
          :span="8"
        >
          <!-- :class="showOver == true? 'overDiv':''" -->
          <div 
            v-if="showOver == true" 
            class="checkbox_box"
            @click="CheckClick(item)"
          >
            <el-checkbox v-model="item.CheckboxStatus" />
          </div>
          <div 
            class="elcol_box"
            :class="showOver == true? 'overDiv':''"
          >
            <div
              class="img_box"
              @click="GoToShopDali(item)"
            >
              <img
                :src="item.cLogoUrl"
                alt=""
              >
            </div>
            <div class="elcol_body">
              <div class="title">
                {{ item.cShopShowName }}
              </div>
              <div class="shop_find">
                <span @click="ShopCancelCollection(item)">取消收藏</span>
                <span @click="GoToShopDali(item)">进店逛逛</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 关注的店铺END -->
    <!-- 关注的主题 -->
    <div
      v-if=" selectTypeId===3"
      class="cllect_box"
    >
      <el-row :gutter="20">
        <el-col
          v-for="(item,index) in TopicCollectList"
          :key="index"
          :span="8"
        >
          <!-- :class="showOver == true? 'overDiv':''" -->
          <div 
            v-if="showOver == true" 
            class="checkbox_box"
            @click="CheckClick(item)"
          >
            <el-checkbox v-model="item.CheckboxStatus" />
          </div>
          <div 
            class="elcol_box"
            :class="showOver == true? 'overDiv':''"
          >
            <div
              class="img_box"
              @click="ToicGoToShopDali(item)"
            >
              <img
                :src="item.cover_image"
                alt=""
              >
            </div>
            <div class="elcol_body">
              <div class="title">
                {{ item.name }}
              </div>
              <div class="shop_find">
                <span @click="ToicCancelCollection(item)">取消收藏</span>
                <span @click="ToicGoToShopDali(item)">去看看</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 关注的主题END -->
    <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="PageTotal"
        :current-page.sync="pageIndex"
        :page-size.sync="pagesize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CllectList",
  data() {
    return {
      selectTypeId: 1, // 切换
      PageTotal: 0, // 总条目数
      pageIndex: 1, // 分页索引
      pagesize: 9, // 单页数量,
      productName: '', // 商品名称(搜索)
      tagId: '', // 标签id
      classId: '', // 分类id
      CollectList: [], // 列表数据
      ShopCollectList: [], // 关注店铺列表数据
      TopicCollectList: [], // 关注的专题列表
      checkedCities:[], // 勾选复选框数据
      ShopcheckedCities: [], // 店铺勾选
      TopicCheckedCities: [],  // 专题勾选 
      showOver: false, // 遮罩层显示状态
      selecteAllstatus: false, // 全选状态
    };
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {
    if(this.selectTypeId === 1) {
      this.GetCollectData(this.classId, this.productName, this.tagId) // 关注商品
    }
  },

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 遮罩是否显示
    showOverDiv(showOverDiv) {
      console.log("显示遮罩状态:",showOverDiv)
      this.showOver = showOverDiv
    },
    // 分类切换
    selectType(selectTypeId) {
      console.log('selectTypeId', selectTypeId)
      this.selectTypeId = selectTypeId
      this.showOver =  false, // 遮罩层显示状态
      this.selecteAllstatus = false, // 全选状态
      this.checkedCities = [], // 勾选复选框数据
      this.ShopcheckedCities = [] // 店铺勾选
      this.TopicCheckedCities = [] // 专题勾选
      this.productName = ""
      this.classId = ""
      this.tagId = ""
      this.pageIndex = 1
      if(selectTypeId === 1) {
        this.GetCollectData(this.classId, this.productName, this.tagId)
      } else if(selectTypeId === 2) {
        this.GetCllectShopData(this.productName)
      } else if(selectTypeId  === 3) {
        this.GetTopicCollectData() // 关注的主题
      }
      
    },
    // 获取搜索
    SearchInput(SearchInput) {
      console.log('获取搜索SearchInput', SearchInput)
      this.productName = SearchInput
      if(this.selectTypeId === 1) {
        this.GetCollectData(this.classId, this.productName, this.tagId)
      } else if(this.selectTypeId === 2) {
        this.GetCllectShopData(this.productName)
      }
    },
    // 获取分类筛选全部
    ClassAll(ClassAll) {
      console.log('获取分类筛选全部', ClassAll)
      this.classId = ClassAll
      this.GetCollectData(this.classId, this.productName, this.tagId)
    },
    // 获取分类筛选
    ClassTabClick(ClassTabClick) {
      this.classId = ClassTabClick
      this.GetCollectData(this.classId, this.productName, this.tagId)
    },
    // 获取标签筛选全部
    TagAll(TagAll) {
      this.tagId = TagAll
      this.GetCollectData(this.classId, this.productName, this.tagId)
    },
    // 获取标签筛选
    TagTabClisck(TagTabClisck) {
      this.tagId = TagTabClisck
      this.GetCollectData(this.classId, this.productName, this.tagId)
    },
    // 获取数据关注商品
    GetCollectData(classId,productName,tagId) {
      let params = {
         token:localStorage.getItem("token"),
         data: {
          currentPage: this.pageIndex,
          pagesize: this.pagesize,
          classId: classId,
          productName: productName,
          tagId: tagId
         }
      }
      this.$api.person.getProductFavorites(params).then((res) => {
        console.log('获取数据关注商品', res.data)
        this.PageTotal = res.data.pager.totalCount
        res.data.pager.data.forEach(element => {
          this.$set(element, "CheckboxStatus", false);
          // 通过商品详情查询skuid
          let params = {
            token: localStorage.getItem('token'),
            data: {
              id: element.pid
            }
          }
          this.$api.good.getGoodDetail(params).then(res => {
            // console.log('通过商品详情查询', res.data)
            this.$set(element, "defaultSKUId", res.data.lsProductSkus[0].id);
          })
        });
        this.CollectList = res.data.pager.data
      })
    },
    // 获取关注店铺
    GetCllectShopData(shopName) {
      let params = {
        token:localStorage.getItem("token"),
        iShopId: '',
        currentPage: this.pageIndex,
        pagesize: this.pagesize,
        shopName: shopName
      }
      this.$api.commit.GetShopFavorites(params).then(res => {
        console.log('获取关注店铺', res)
        res.data.pager.data.forEach(element => {
          this.$set(element, "CheckboxStatus", false);
        })
        this.PageTotal = res.data.pager.totalCount
        this.ShopCollectList = res.data.pager.data
      })
    },
    // 进店逛逛
    GoToShopDali(GoToShopDali) {
      console.log('进店逛逛', GoToShopDali)
      this.$router.push({
        path: "/shopindex?id=" + GoToShopDali.shopid,
      });
      sessionStorage.setItem("ShopID", GoToShopDali.shopid)
    },
    // 专题去看看
    ToicGoToShopDali(ToicGoToShopDali){
      console.log('专题去看看', ToicGoToShopDali)
      this.$router.push({
        path:'/topicDetail?id=' + ToicGoToShopDali.id
      })
    },
    // 获取关注的专题
    GetTopicCollectData() {
      console.log('uid: JSON.parse(localStorage.getItem("userInfo")).mid,',JSON.parse(localStorage.getItem("userInfo")).mid)
      let params = {
        uid: JSON.parse(localStorage.getItem("userInfo")).mid,
        page: this.pageIndex,
        limit: this.pagesize,
      }
      this.$api.person.topicCollectList(params).then(res => {
        console.log('获取关注的专题', res.data)
        res.data.data.forEach(element => {
          this.$set(element, "CheckboxStatus", false);
        })
        this.PageTotal = res.data.current_page
        this.TopicCollectList = res.data.data
      })
    },
    // 分页获取当前页
    handleCurrentChange(val) {
      console.log("分页获取当前页", val);
      this.pageIndex = val;
      if(this.selectTypeId === 1) {
        this.GetCollectData(this.classId, this.productName, this.tagId)
      } else if(this.selectTypeId === 2) {
        this.GetCllectShopData(this.productName)
      }
    },
    // 去详情
    GoToSho(GoToSho) {
      console.log('去详情', GoToSho)
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GoToSho.pid,
          iShopId: GoToSho.iShopId
        },
      });
    },
    // 接收是否全选
    selecteAll(selecteAll) {
      console.log('接收是否全选', selecteAll)
      this.selecteAllstatus = selecteAll
      if (this.selectTypeId === 1) {
        if(selecteAll) {
          this.CollectList.forEach(element => {
            this.$set(element, "CheckboxStatus", true);
          });
          this.checkedCities = this.CollectList
        } else {
          this.CollectList.forEach(element => {
            this.$set(element, "CheckboxStatus", false);
          });
          this.checkedCities = []
        }
      } else if (this.selectTypeId === 2) {
        if(selecteAll) {
          this.ShopCollectList.forEach(element => {
            this.$set(element, "CheckboxStatus", true);
          });
          this.ShopcheckedCities = this.ShopCollectList
        } else {
          this.ShopCollectList.forEach(element => {
            this.$set(element, "CheckboxStatus", false);
          });
          this.ShopcheckedCities = []
        }
      } else if (this.selectTypeId === 3) {
        if(selecteAll) {
          this.TopicCollectList.forEach(element => {
            this.$set(element, "CheckboxStatus", true);
          });
          this.TopicCheckedCities = this.TopicCollectList
        } else {
          this.TopicCollectList.forEach(element => {
            this.$set(element, "CheckboxStatus", false);
          });
          this.TopicCheckedCities = []
        }
      }
    },
    // 获取批量选择
    CheckClick(CheckClick) {
      let CheckedCitiesArr = []
      if (this.selectTypeId === 1) {
        CheckClick.CheckboxStatus = !CheckClick.CheckboxStatus
        for(let i in this.CollectList) {
          if(this.CollectList[i].CheckboxStatus){
            CheckedCitiesArr.push(this.CollectList[i])
          }
        } 
        this.checkedCities = CheckedCitiesArr
        if(CheckedCitiesArr.length !==this.CollectList.length) {
          console.log('全选关')
          this.selecteAllstatus = false
          this.$emit("selectStatusAll", this.selecteAllstatus);
        } else {
          console.log('全选开')
          this.selecteAllstatus = true
          this.$emit("selectStatusAll", this.selecteAllstatus);
        }
      } else if(this.selectTypeId === 2) {
        CheckClick.CheckboxStatus = !CheckClick.CheckboxStatus
        for(let i in this.ShopCollectList) {
          if(this.ShopCollectList[i].CheckboxStatus){
            CheckedCitiesArr.push(this.ShopCollectList[i])
          }
        }
        this.ShopcheckedCities = CheckedCitiesArr
        console.log('this.ShopcheckedCities', this.ShopcheckedCities)
        if(CheckedCitiesArr.length !==this.ShopCollectList.length) {
          console.log('全选关')
          this.selecteAllstatus = false
          this.$emit("selectStatusAll", this.selecteAllstatus);
        } else {
          console.log('全选开')
          this.selecteAllstatus = true
          this.$emit("selectStatusAll", this.selecteAllstatus);
        }
      } else if(this.selectTypeId === 3) {
        CheckClick.CheckboxStatus = !CheckClick.CheckboxStatus
        for(let i in this.TopicCollectList) {
          if(this.TopicCollectList[i].CheckboxStatus){
            CheckedCitiesArr.push(this.TopicCollectList[i])
          }
        }
        this.TopicCheckedCities = CheckedCitiesArr
        console.log('this.TopicCheckedCities', this.TopicCheckedCities)
        if(CheckedCitiesArr.length !==this.TopicCollectList.length) {
          console.log('全选关')
          this.selecteAllstatus = false
          this.$emit("selectStatusAll", this.selecteAllstatus);
        } else {
          console.log('全选开')
          this.selecteAllstatus = true
          this.$emit("selectStatusAll", this.selecteAllstatus);
        }
      }
    },
    // 批量取消
    AllCancelCollection() {
      console.log('批量取消', this.checkedCities)
      if(this.selectTypeId === 1) {
        if(this.checkedCities.length === 0) {
          this.$message.error('请选择商品');
        } else {
          this.checkedCities.forEach(element => {
            this.CancelCollection(element)
          });
        }
      } else if(this.selectTypeId === 2) {
        this.ShopCancelCollection()
      } else if( this.selectTypeId === 3) {
        this.TopicCancelCollection()
      }
    },
    // 批量取消店铺
    ShopCancelCollection() {
      console.log('批量取消店铺', this.ShopcheckedCities)
      if(this.ShopcheckedCities.length === 0) {
        this.$message.error('请选择店铺');
      } else {
        let ids = []
        this.ShopcheckedCities.forEach(element => {
          ids.push(element.shopid)
        });
        this.ShopdelFavoritesAPI(ids)
      }
    },
    // 取消店铺搜藏
    ShopdelFavoritesAPI(ids) {
      let params = {
        token: localStorage.getItem("token"),
        ids: ids
      }
      this.$api.commit.delFavorites(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.GetCllectShopData(this.productName) // 关注店铺
          this.$emit("AllRefreshPage");
        }
      })
    },
    // 批量取消专题
    TopicCancelCollection() {
      console.log('批量取消专题', this.TopicCheckedCities)
    },
    // 取消专题
    ToicCancelCollection(ToicCancelCollection) {
      console.log('取消专题', ToicCancelCollection)
    },
    // 取消收藏
    CancelCollection(CancelCollection) {
      console.log('取消收藏', CancelCollection)
      let params = {
        token: localStorage.getItem('token'),
        data: {
          productId: CancelCollection.pid
        }  
			}
      this.$api.good.delFavoritesByProductId(params).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.GetCollectData(this.classId, this.productName, this.tagId)
          this.$emit("AllRefreshPage");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 批量加入购物车
    AllAddCar(){
      if(this.checkedCities.length === 0) {
        this.$message.error('请选择商品');
      } else {
        this.checkedCities.forEach(element => {
          this.AddCar(element)
        });
      }
    },
    // 加入购物车
    AddCar(AddCar) {
      console.log('加入购物车', AddCar)
      let params = {
        token: localStorage.getItem("token"),
        data: [
          {
            iSKUId: AddCar.defaultSKUId,
            iProductId: AddCar.pid,
            onLineOffLine: 0,
            iQuantity: 1,
            dlyType: "EMS",
          },
        ],
      };
      console.log("params", params);
      this.$api.good.addCarts(params).then((res) => {
        console.log("addCarts", res);
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style style lang='scss' scoped>
#CllectList {
  .cllect_box {
    max-height: 64rem;
    overflow-y: auto;
    overflow-x: hidden;
    .checkbox_box{
      display: flex;
      justify-content: flex-end;
      background:rgba(0, 0, 0, 0.6);
      padding: 1rem;
      position: absolute;
      width: 28.5%;
      // height: 26rem;
      height: 22rem;
      cursor:pointer;//鼠标变小手
    }
    .elcol_box{
      background: #fff;
      // height: 24rem;
      margin-bottom: 20px;
      padding:1rem;
      
      .img_box{
        width: 14rem;
        height: 14rem;
        margin: 0 auto .8rem auto;
        cursor:pointer;//鼠标变小手
        img {
          // width: 15.5rem;
          // height: 15.5rem;
          width: 100%;
          object-fit: contain;
        }
      }
      .elcol_body{
        display: flex;
        // height: 10rem;
        flex-direction: column;
       
        .title{
          display: flex;
          align-items: center;
          height: 3rem;
          font-size: 1.375rem;
          color: #343434;
        }
        .elcol_body_l{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .price_box{
            display: flex;
            height: 3rem;
            align-items: center;
            .money {
              font-size: 0.8rem;
              color: #f03f6e;
            }
            .price {
              color: #f03f6e;
              font-size: 1.37rem;
              margin-right: 0.44rem;
            }
            .addcard{
              color: #f03f6e;
              font-size: 1.37rem;
              cursor:pointer;//鼠标变小手
            }
          }
        }

        .compare_box{
          color: #f03f6e;
          font-size: .8rem;
          display: flex;
          height: 3rem;
          align-items: center;
        }

        .find{
          color: #f03f6e;
          font-size: 1rem;
          display: flex;
          justify-content: center;
          height: 3rem;
          align-items: center;
          cursor:pointer;//鼠标变小手
        }
        .shop_find{
          color: #f03f6e;
          font-size: 1rem;
          display: flex;
          justify-content: space-between;
          // height: 6rem;
          height: 2rem;
          align-items: flex-end;
          cursor:pointer;//鼠标变小手
        }
      }
    }
    .overDiv{
      padding-top: 3rem;
    }
    // .overDiv{
    //   background: #a9a6a6 !important;
    //   opacity:0.4; 
    //   filter: alpha(opacity=60);
    // }
  }

  .pagination_box {
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }
}
</style>

<style>
.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}

.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
</style>